import React, { useEffect } from 'react';
import { Button, Space } from 'antd';
import '../style.less';
import ModalFactory from './ModalFactory';
import { statusType } from '../type';

const Index = () => {
  const btns: { type: statusType; name: string }[] = [
    {
      type: 'success',
      name: '成功',
    },
    {
      type: 'warn',
      name: '告警',
    },
    {
      type: 'error',
      name: '失败',
    },
  ];
  const handleBtn = (type: statusType) => {
    const modalBoxNode = document.getElementById('modal-box');
    const Factory = new ModalFactory(modalBoxNode);
    Factory.createModal(type);
  };

  return (
    <div>
      <h3>案例需求：</h3>
      <h3>做一个Modal模态框，有以下三种状态：</h3>
      <ul>
        <li>成功</li>
        <li>告警</li>
        <li>失败</li>
      </ul>
      <h3>工厂类的特点：有一个工厂方法（create），接受了一个参数，通过不同的参数实例化不同的产品类。</h3>
      <Space>
        {btns.map((i) => (
          <Button key={i.name} onClick={() => handleBtn(i.type)}>
            {i.name}
          </Button>
        ))}
      </Space>
      <div id="modal-box"></div>
    </div>
  );
};
export default Index;
